<template>
    <div id="bookinfo">
        <mu-dialog :open="dialog" title="选择日期" @close="close" scrollable>
            <div  id="datepk" style="width: 100%;"></div>
            <input type="hidden" name="t" id="t" value=""  class="auto-kal" style="width:200px;" />
            <mu-flat-button primary label="确定" @click="subselecttime" slot="actions"/>
        </mu-dialog>

        <!-- <mu-dialog :open="prompt.Boolean" @close="close" title="提示">
            <div class="center">{{prompt.article}}</div>
            <mu-flat-button label="确定" slot="actions" primary @click="promptclose"/>
        </mu-dialog> -->

        <header class="head">        
            <div class="back" @click="dicancel">
               <mu-icon value="chevron_left"/>
            </div>
            <div class="head_text" @click="">
                预定信息      
            </div>
            <div class="flex1"></div>
        </header>

        <section class="book-section fixed-bottom">
            <!--日期部分-->
            <!--{{timeRange.getselectedNum}}-->
            <!--{{roomdata}}-->
            <div class="book-comm-part book-one-part">
                <div class="one-left">
                    <p class="one-left-top">
                        <i class="material-icons date-icon">date_range</i>
                        <span id="checkIntime" v-text="enterTime"></span>
                        <strong>入住</strong>
                    </p>
                    <p class="one-left-bottom">
                        <i class="material-icons date-icon">date_range</i>
                        <span id="checkInout" v-text="leaveTime"></span>
                        <strong>离开</strong>
                    </p>
                </div>
                <div class="one-right">
                    <span @click="dialog=true" class="one-btn">修改</span>
                </div>
            </div>
            <!--信息填写-->        
            <ul class="book-two-part">
                <li class="two-list book-comm-part">
                    <label for="checkName">入住人: </label>
                    <input type="text" v-model="tenantInfo.name" required name="checkName" placeholder="填写入住人姓名">
                </li>
                <li class="two-list book-comm-part">
                    <label for="IDNum">身份证号: </label>
                    <input type="text" required v-model="tenantInfo.idNo" name="IDNum" placeholder="填写身份证号码">
                </li>
                <li class="two-list book-comm-part">
                    <label for="iphoneNum">手机号: </label>
                    <input type="number" required v-model="tenantInfo.mobileNo" name="iphoneNum" placeholder="填写手机号码">
                </li>
                <!-- <li class="two-list book-comm-part">
                    <label for="invoice">发票抬头: </label>
                    <input type="text" name="invoice" v-model="tenantInfo.receipt" placeholder="如需发票 填写发票抬头">
                </li> -->
            </ul>
            <!--可选服务-->
             <div class="book-three-part golbal-part-title">
                <div class="three-title  golbal-head-comm">
                    <p class="golbal-title-comm">可选服务</p>
                    <i class="material-icons golbal-arrow-rigth-comm">keyboard_arrow_right</i>
                </div>
                <ul class="three-cont">
                    <li class="three-list book-comm-part" v-for="(item,index) in ss">
                        <div class="three-left">
                            <img class="globalImg" src="../../assets/images/pic01.png">
                        </div>
                        <div class="three-center">
                            <p class="unit-price"><em class="font18">{{item.price}}</em> 元/位</p>
                            <p class="unit-price-name">{{consumableType[item.consumableType]}}</p>
                        </div>
                        <div class="three-right">
                            <i @click="reduceConsum(index)" class="material-icons three-icon">remove_circle_outline</i>
                            {{item.quantity}}
                            <i @click="addConsum(index)" class="material-icons three-icon">add_circle_outline</i>
                        </div>
                    </li>
                     <!--<li class="three-list book-comm-part">
                        <div class="three-left">
                            <img class="globalImg" src="../../assets/images/pic01.png">
                        </div>
                        <div class="three-center">
                            <p class="unit-price"><em class="font18">58</em> 元/位</p>
                            <p class="unit-price-name">上海特色早餐</p>
                        </div>
                        <div class="three-right">
                            <i class="material-icons three-icon">remove_circle_outline</i>
                            1
                            <i class="material-icons three-icon">add_circle_outline</i>
                        </div>
                    </li>-->
                </ul>
            </div> 
            <!--小舍介绍-->
             <div class="book-four-part golbal-part-title">
                <div class="three-title  golbal-head-comm">
                    <p class="golbal-title-comm">小舍介绍</p>
                    <i class="material-icons  golbal-arrow-rigth-comm">keyboard_arrow_right</i>
                </div>
                <div class="book-four-cont">
                    
                </div>
            </div>     
        </section>
    <footer @click="gotopay" class="footer">下一步</footer>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的
    import {
        Toast
    } from 'mint-ui';
    import selectTimeRange from './seletTimeRange.vue'
    //import Kalendae from '../../assets/js/kalendae.standalone.js'
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'bookinfo', //组件的名字
        data() {
            return { //数据
                dialog: false,
                //dicancel:false,
                ss: [], //被重新定义的特殊服务
                prompt: { //提示信息
                    article: '',
                    Boolean: false
                },
                OrderConsumablesDTO: [],
                total: 0,
                timeRange: {},
                tenantInfo: { //房客信息
                    name: '',
                    idNo: '',
                    mobileNo: '',
                    receipt: '',
                    idType: 101,
                },
                tenantInfoprompt: {
                    name: '请填写入住人信息',
                    idNo: '请填写身份证号',
                    mobileNo: "请填写手机号",
                },
            }
        },
        methods: { //方法
            ...mapMutations(['setLeaveTime', 'setEnertTime', 'setconsumables',
                'settenantInfo', 'setDuration'
            ]),
            ...mapActions(['roomStatus']),
            close(){
                this.dialog = false
            },
            dicancel(){
                let vm = this
                $.UIComfirm('预订未完成，确认要离开？',function(re){
                    if(re == 'yes'){
                        $.session_Storage.removeItem('orderId')
                        vm.setEnertTime('')
                        vm.setLeaveTime('')
                        vm.$router.go(-1)
                    }
                })
            },
            changeCheck(){
                let vm = this
                let od = $.session_Storage.getItem('orderId')
                console.log(od)
                if(od != '' && od != null){
                    $.hsf.startLoading()
                    $.hsf.ajaxPost('wx/order/' + od,'','',function(result){
                        console.log(result)
                        if(result.code == '200'){
                            $.hsf.stopLoading()
                            vm.tenantInfo.name = result.data.tenants[0].name
                            vm.tenantInfo.idNo = result.data.tenants[0].idNo.replace(/(^\s*)|(\s*$)/g, "")
                            vm.tenantInfo.mobileNo = parseInt(result.data.tenants[0].mobileNo)
                            vm.tenantInfo.receipt = result.data.invoiceContent
                            vm.ss = result.data.orderConsumables
                        }
                    })
                }
            },
            gotopay() { //创建订单
                let tenantInfo = this.tenantInfo
                let vm = this
                let phone = this.tenantInfo.mobileNo
                let idcard = this.tenantInfo.idNo

                for (let i in tenantInfo) {
                    if ('receipt' == i) continue;
                    if (tenantInfo[i] == '') {
                        // vm.prompt.article = vm.tenantInfoprompt[i];
                        // vm.prompt.Boolean = true
                        Toast(vm.tenantInfoprompt[i]);
                        return false
                    }
                }

                if (!this.cmf.isCardNo(idcard)) {
                    //vm.prompt.article = '请输入正确的身份证号';
                    //vm.prompt.Boolean = true
                    Toast('请输入正确的身份证号');
                    return false;
                }

                if (!this.cmf.isPhone(phone)) {
                    //vm.prompt.article = '请输入正确的手机号';
                    //vm.prompt.Boolean = true
                    Toast('请输入正确的手机号');
                    return false;
                }

                if (this.enterTime == '' || this.leaveTime == '') {
                    //vm.prompt.article = '请选择入住离开时间';
                    //vm.prompt.Boolean = true
                    Toast('请选择入住离开时间');
                    return false
                }

                let ss = this.setorderConsumables(this.ss)

                let infos = {
                    "roomId": this.$store.state.roomId,
                    "orderId":$.session_Storage.getItem('orderId') || '',
                    //"userId" : "1",
                    //"orderType" : "102",
                    "checkinTime": this.enterTime,
                    "checkoutTime": this.leaveTime,
                    "invoiceType": "101",
                    "invoiceContent": tenantInfo.receipt,
                    "paymentMethod": "103",
                    //"status" : "108",
                    //"paymentStatus" : "101",
                    "comments": "带大阳台",
                    "tenants": [{ //入住人列表
                        "name": tenantInfo.name,
                        "idType": "101",
                        "idNo": tenantInfo.idNo,
                        "mobileNo": tenantInfo.mobileNo
                    }],
                    "orderConsumables": ss //订单易耗品明细列表
                };
                let info = JSON.stringify(infos)
                console.log(info)
                $.hsf.startLoading()
                $.hsf.ajaxPost('wx/' + $.local_Storage.getItem('wxopenid') + '/order/create', info, '', function(result) {
                    console.log(result)
                    if (result.code == '200') {
                        $.hsf.stopLoading()
                        //vm.setEnertTime('');
                        //vm.setLeaveTime('');
                        $.session_Storage.setItem('orderId',result.data.orderId)
                        vm.$router.push({
                            path: '/payment',
                            query: {
                                orderId: result.data.orderId
                            }
                        })
                    }
                })
            },
            promptclose() {
                this.prompt.Boolean = false
            },
            setorderConsumables(ss) { //处理特殊服务给后台想要的数据格式
                let res = []
                ss.map((v, i) => {
                    if (v.quantity > 0) {
                        let s = {
                            consumableId: v.consumableId,
                            consumableType: v.consumableType,
                            price: v.price,
                            quantity: v.quantity
                        }
                        res.push(s)
                    }
                })
                return res;
            },
            reduceConsum(i) { //减去特殊服务
                var n = this.ss[i].quantity
                if (n == 0)
                    return

                this.ss[i].price = this.ss[i].price + 1
                this.ss[i].quantity = n - 1
                this.ss[i].price = this.ss[i].price - 1
                this.total -= this.ss[i].price
            },
            addConsum(i) { //加上特殊服务
                var n = this.ss[i].quantity

                this.ss[i].price = this.ss[i].price + 1

                this.ss[i].quantity = n + 1

                this.ss[i].price = this.ss[i].price - 1
                this.total += this.ss[i].price
                    //   console.log(s)
                    //  this.setconsumablesnum(i,s)
                    // console.log(JSON.stringify( this.ss[i]))
            },
            subselecttime() { //关闭 时间弹窗
                this.dialog = false
            },
            setconsumablesnum() { //页面初始化的时候 给 consumables 重新定义特殊服务
                if (this.consumables == undefined) {
                    return false;
                }
                this.ss = this.consumables

                if (this.consumables.length == 0) {
                    this.ss = []
                    return
                } else {
                    let s = this.consumables
                    s.map((v, i) => {
                        v.quantity = 0 // 数量
                    })
                    this.ss = s
                }
            },
            initKalendae() { //初始化房间选择日历
                function getClass(tagName, className) //获得标签名为tagName,类名className的元素
                {
                    if (document.getElementsByClassName) //支持这个函数
                    {

                        return document.getElementsByClassName(className);
                    } else {
                        var tags = document.getElementsByTagName(tagName); //获取标签
                        var tagArr = []; //用于返回类名为className的元素
                        for (var i = 0; i < tags.length; i++) {
                            if (tags[i].class == className) {
                                tagArr[tagArr.length] = tags[i]; //保存满足条件的元素
                            }
                        }
                        return tagArr;
                    }
                };
                let vm = this
                var timeRange = new Kalendae(document.getElementById("datepk"), {
                    months: 4,
                    mf: this.dateStatus,
                    //enterTime: '2017-02-07',
                    //leaveTime: '2017-03-20',
                    mode: 'range',
                    subscribe: {
                        'change': function(date) {
                            let res = this.getSelected()
                            //console.log(this.getselectedNum())
                            vm.setEnertTime(res.split('~')[0]); //把入住时间放到vuex里面
                            vm.setLeaveTime(res.split('~')[1]);
                            //vm.enterTime = res.split('~')[0];
                            //vm.leaveTime = res.split('~')[1];
                            t.value = res;
                            //b.value=this.getSelectedAsDates()
                        }
                    }
                });
                this.timeRange = timeRange // new的时间选择对象 后面要来获取选择的天数
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['enterTime', 'leaveTime', 'roomdata', 'Duration', 'consumableType', 'dateStatus']),
            // 
            ...mapGetters(['consumables'])
        },
        mounted: function() { //组件加载完成
            this.setconsumablesnum()
            this.total = this.roomdata.price
            this.roomStatus(this.$store.state.roomId)
            this.initKalendae()
            this.changeCheck()
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        },
        components: {
            selecttimerange: selectTimeRange
        }

    }
</script>
<style scoped lang="scss">
    .bookinfo {
        position: relative;
    }
    
    .book-comm-part {
        display: flex;
        justify-content: center;
        /*定义项目在主轴的对齐方向*/
        align-items: center;
        /*定义项目在交叉轴的对齐方向*/
    }
    
    .book-one-part {
        margin-bottom: 10px;
        padding: 20px 15px;
        border-bottom: 2px solid #eee;
        color: #666;
        .one-left {
            flex: 6;
            position: relative;
            text-align: left;
            p {
                line-height: 2.4;
                .date-icon {
                    vertical-align: -4px;
                    color: #999;
                    margin-right: 10px;
                }
                strong {
                    color: #333;
                    margin-left: 10px;
                }
            }
        }
        .one-right {
            flex: 1;
            position: relative;
            text-align: center;
            background: #ff5a5f;
            color: #fff;
            padding: 6px 10px;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 1px;
            font-family: "微软雅黑";
            border-radius: 4px;
        }
    }
    
    .book-two-part {
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        color: #666;
        .two-list {
            border-bottom: 1px solid #eee;
            padding: 6px 15px;
            label {
                flex: 2;
                position: relative;
                text-align: left;
            }
            input {
                border: none;
                height: 30px;
                line-height: 30px;
                color: #333;
                flex: 6;
                position: relative;
                text-align: left;
            }
        }
    }
    
    .book-three-part {
        margin-bottom: 10px;
        border-bottom: 2px solid #eee;
        /*可选套餐的列表*/
        .three-list {
            margin: 10px auto;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            .three-left {
                flex: 1;
                position: relative;
                text-align: left;
                margin-right: 16px;
            }
            .three-center {
                flex: 3;
                position: relative;
                text-align: left;
                .unit-price {
                    color: #ff5a5f;
                    em {
                        font-family: "arial";
                    }
                }
                .unit-price-name {
                    font-size: 16px;
                    font-family: "微软雅黑";
                }
            }
            .three-right {
                flex: 3;
                position: relative;
                text-align: right;
                color: #ff5a5f;
                .three-icon {
                    vertical-align: -8px;
                }
            }
        }
    }
    
    .book-four-cont {
        text-indent: 20px;
        color: #999;
    }
    
    .mu-dialog-wrapper {
        width: 100% !important;
    }
    
    .mu-dialog-body {
        // padding-left: 0;
        // padding-right: 0;
        text-align: center;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->